<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="留样详情">
        <template slot="btn">
          <el-button class="filter-item" plain="" size="small"
                     @click="handleBack">返回
          </el-button>
        </template>
      </modules-title>
    </div>
    <div style="padding:20px" class="optionLog-component">
      <div class="title-container">
        <div class="left">
          <p class="title-con"><span>基本信息</span></p>
        </div>
      </div>
      <el-form label-width="100px" size="small" label-position="left">
        <el-row :gutter="80">

          <el-col :span="8">
            <el-form-item label="所属项目：">
              <span>{{form.project_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样编号：">
              <span>{{form.reserve_sample_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样位置名称：" label-width="120px">
              <span>{{form.location_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样包装：">
              <span>{{form.packaging}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样有效期：">
              <span v-if="form.expiry_date"> {{dateFormat1('yyyy-mm-dd ',form.expiry_date)}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样数量：">
              <span>{{form.num}}</span>
              <span v-if="form.sample_info && form.sample_info.unit ">{{form.sample_info.unit}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样状态：">
              <span v-if="form.status==0">已留样</span>
              <span v-if="form.status==1">留样销毁审批中</span>
              <span v-if="form.status==2">已销毁</span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.destruction_reason">
            <el-form-item label="销毁理由/原因：" label-width="130px">
              <span>{{form.destruction_reason}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.destruction_advice">
            <el-form-item label="销毁审批意见：" label-width="130px">
              <span>{{form.destruction_advice}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="检验负责人：">
              <span v-if="form.inspection_user!=null">{{form.inspection_user.name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="请检人:">
                        <span
                          v-if="form.apply_inspection_user!=null">{{form.apply_inspection_user.name}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="padding:20px" class="optionLog-component">
      <div class="title-container">
        <div class="left">
          <p class="title-con"><span>样品信息</span></p>
        </div>
      </div>
      <el-form label-width="100px" size="small" label-position="left">
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="样品名称：">
              <span v-if="form.sample_info!=null">{{form.sample_info.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="样品类别：">
              <span v-if="form.sample_info.sample_type_info">
                {{form.sample_info.sample_type_info.same_type_name	}}
              </span>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8">-->
          <!--            <el-form-item label="规格：">-->
          <!--              <span v-if="form.sample_info!=null">{{form.sample_info.attr}}</span>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <el-col :span="8">
            <el-form-item label="CAS：">
              <span v-if="form.sample_info!=null">{{form.sample_info.cas}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="供应商：">
              <span v-if="form.sample_info!=null">{{form.sample_info.supplier}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="生产商：">
              <span v-if="form.sample_info!=null">{{form.sample_info.producer}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="批号：">
              <span v-if="form.sample_info"> {{handlBatch(form.sample_info.batch_info)}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产日期：">
              <span
                v-if="form.sample_info.production_date">{{dateFormat1('yyyy-mm-dd ',form.sample_info.production_date)}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <log/>
    </div>


  </div>
</template>

<script>
  import { sampleDetail, sampleFlowDetail } from '@/api/samples'

  export default {
    components: {
      log: () => import('./modules/log')
    },
    data() {
      return {
        form: {
          inspection_user: {},
          sample_info: {},
          apply_inspection_user: {}
        }
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {
      handlBatch() {
        return function(val) {
          let str = ''
          if (val) {
            for (let i = 0; i < val.length; i++) {
              str += val[i].sample_batch
              if (i !== val.length - 1) {
                str = str + '、'
              }
            }
          }
          return str
        }
      }
    },
    //属性是手动定义的所需监听的值
    watch: {},
    //生命周期 - 创建完成（访问当前this实例）
    created() {
      this.handlData()
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },
    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      //获取数据
      handlData() {
        let commit = undefined,
          id = ''
        if (this.$route.query.id) {
          commit = sampleDetail
          id = this.$route.query.id
        }
        if (this.$route.query.f_id) {
          commit = sampleFlowDetail
          id = this.$route.query.f_id
        }
        if (id !== '') {
          commit(id).then(res => {
            if (res.code === 200) {
              this.form = res.data
            }
          })
        }
      },

      //返回
      handleBack() {
        this.$router.go(-1)
      }
    }
  }
</script>
<style lang="scss" scoped>
  /* @import url(); 引入css类 */
  @import "@/assets/scss/views/sampleInspection/log.scss";

  ::v-deep .pagination-container {
    padding: 0 !important;
  }
</style>
